<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Picker Example</title>

    <!-- The standard Google Loader script; use your own key. -->
    <script src="http://www.google.com/jsapi?key=ABQIAAAAVbSXpJwQBNML8sJJyd7iWRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRWq2NlYUaJKCPOJAZcv1TZ8btEJA"></script>
    <script src="json2.js"></script>
    <script type="text/javascript">

    // Use the Google Loader script to load the google.picker script.
    google.setOnLoadCallback();
    google.load('picker', '1');
    google.load("jquery", "1.6.4");
    google.load("jqueryui", "1.8.16");

    // Create and render a Picker object for searching images.

    function createPicker() {
         var picker = new google.picker.PickerBuilder().
            addView(google.picker.ViewId.PHOTOS).
            enableFeature(google.picker.Feature.MULTISELECT_ENABLED).
            addView(google.picker.ViewId.YOUTUBE).
            enableFeature(google.picker.Feature.MULTISELECT_ENABLED).
            addView(google.picker.ViewId.IMAGE_SEARCH).
            enableFeature(google.picker.Feature.MULTISELECT_ENABLED).
            addView(google.picker.ViewId.VIDEO_SEARCH).
            enableFeature(google.picker.Feature.MULTISELECT_ENABLED).
            enableFeature(google.picker.Feature.SIMPLE_UPLOAD_ENABLED).
            setCallback(pickerCallback).
            build();
        picker.setVisible(true);

    }

    google.setOnLoadCallback(function() {
      $("#json_data").sortable({
        update: function() {
          $.fn.updateJson();
        }
      });

      $.fn.updateJson = function() {
          $('div.order').each(function(index) {
            $(this).html(index + 1);
          });
          $("div.comma").each(function(index) {
            $(this).html(',');
          });
          $("div.comma").last().html('');
          $("#output").val('['  + $.trim($('#json_data').text()) + ']');
      }

      $.fn.makeJson = function(obj) {
        json = JSON.stringify(obj, function (key, value) {
              if (key == 'order') {
                return "<div class='order'>" + value + '</div>';
              }
              else {
                return value;
              }
          });
        var img = '<img class="preview_img" src="' + obj.small_thumbnail_url + '"/>';
        var content = '<div class="hidden_json">' + json + '<div class="comma"></div></div>';
        $("#json_data").append('<li>' + img + content + '<br/><a href="#" onClick="javascript:deleteObj(this);"><img src="delete.png" /></a></li>');
      }

     $("textarea#json_input")
     .change( function () {
        try {
          json = $.parseJSON($(this).val());
        }
        catch(err){
          alert('Unable to parse JSON');
          $(this).val('');
          return;
        }
        $.each(json, function(index, obj) {
          obj.order = '';
          $.fn.makeJson(obj);
        });
        $.fn.updateJson();
        $(this).val('');
      });

    });


      
    function deleteObj(obj) {
      $(obj).parent().remove();
      $.fn.updateJson();
    }

   // A simple callback implementation.
    function pickerCallback(data) {
       $.each(data.docs, function(index, doc) {
          obj = getAssetInfo(doc);
          obj.order = '';
          $.fn.makeJson(obj);
        });
        $.fn.updateJson();
    }


    function getPicasaInfo(media_asset, doc){
      switch(doc.type){
        case 'photo':
          media_asset.type = 'image';
          url = (typeof doc.thumbnails[4] === 'undefined') ? doc.thumbnails[3].url : doc.thumbnails[4].url;
          media_asset['image_url'] = url;
          break;
        case 'video':
          media_asset.type = 'video';
          media_asset['embed_url'] = doc.embedUrl;
          break;
        default:
          alert('unknown picasa type: ' + doc.type);
      }
      media_asset.small_thumbnail_url = doc.thumbnails[2].url;
      media_asset.large_thumbnail_url = doc.thumbnails[3].url;
      return media_asset
    }


    function getSearchInfo(media_asset, doc){

      switch(doc.type){
        case 'photo':
          media_asset.type = 'image';
          media_asset['image_url'] = doc.thumbnails[1].url;
          break;

        case 'video':
          media_asset.type = 'video';
          media_asset['embed_url'] = doc.embedUrl;
          break;

        default:
          alert('unknown search type: ' + doc.type);
      }

      media_asset.small_thumbnail_url = doc.thumbnails[0].url;
      media_asset.large_thumbnail_url = doc.thumbnails[1].url;
      return media_asset
    }


    function getAssetInfo(doc){
      var media_asset = new Object();
      var info = []
      switch(doc.serviceId){
        case 'picasa':
          info = getPicasaInfo(media_asset, doc);
          break;
        case 'youtube':
          info = getSearchInfo(media_asset, doc);
          break;
        case 'search-api':
          info = getSearchInfo(media_asset, doc);
          break;
        default:
          alert('unknown service type: ' + doc.serviceId);
          break;
      }
       return info;
    }
    
    function clearFields(){
      $("#output").val('');
      $("#json_data").empty('');    
    }
    </script>
     <style type="text/css">

     div.hidden_json {
       display: none;
     }

      div.order {
       display: inline;
     }

     img.preview_img {
      width: 100px;
     }

     #json_data {
      list-style-type: none;
      margin: 0;
      padding: 0;
     }
     #json_data li {
       margin: 3px 3px 3px 0;
       padding: 1px;
       float: left;
       idth: 100px;
       height: 200px;
       text-align: center;
     }

     textarea {
      width: 300px;
      height: 100px;
     }

     textarea#output {
       background-color: #E6E6E6;
       color: #999;
       font-size: 6px;
     }

     table#options td {
      padding-right: 10px;
     }
    </style>
  </head>
  <body>
    <table id="options">
      <tr>
        <th>Paste existing JSON to load</th>
        <td></td>
        <th>Click here and copy out JSON</th>
      </tr>
      <tr>
        <td><textarea id="json_input" name="json_input" onclick="this.focus();this.select()"></textarea></td>
        <td>
          <div id="picker">
            <input type="button" onclick="createPicker()" value="Show Picker" style="height: 100px; font-size: 12pt; font-weight: bold">
          </div>
        </td>
        <td>
          <textarea id="output" name="output" onclick="this.focus();this.select()" readonly="readonly"></textarea>
        </td>
      <tr>
        <th></th>
        <td align="center"><a href="#" onClick="javascript:clearFields();">reset</a></td>
        <th></th>
      </tr>
      </tr>
    </table>
    
    
    <hr />
    <ul id="json_data">
    </ul>
  </body>
</html>